<template>
  <div class="daizhuc-box"
    style="--van-nav-bar-background:rgb(0,0,0);--nav-bar-text-color:#ffffff;--van-nav-bar-title-text-color:#ffffff;--van-nav-bar-icon-color:#ffffff;">
    <!-- 顶部安全区和导航栏 -->
    <van-nav-bar v-if="isApp" ref="safeAreaInsetTopRef" safe-area-inset-top />
    <van-nav-bar ref="TitleNavbarRef" title="代注册">
      <template #left>
        <van-icon name="arrow-left" size="24" @click="pageBack" />
      </template>
    </van-nav-bar>
    <!-- 顶部安全区和导航栏 -->

    <div class="daizhuc-form">
      <van-form class="content-form-box" @submit="onSubmit">
        <van-cell-group title="店铺信息">
          <van-field v-model="submitForm.shopName" name="shopName" label="店铺名称" placeholder="请输入店铺名称" input-align="right"
            error-message-align="right" :rules="[{ required: true, message: '请输入店铺名称' }]" />
        </van-cell-group>
        <van-cell-group title="联系人信息">
          <van-field v-model="submitForm.shopUserPhone" name="shopUserPhone" type="tel" label="联系电话" placeholder="请输入联系电话"
            input-align="right" error-message-align="right" :rules="[{ required: true, message: '请输入联系电话' }]" />
        </van-cell-group>
        <van-cell-group title="登录信息">
          <van-field v-model="submitForm.firstPassword" name="firstPassword" :type="pass1Show ? 'text' : 'password'" label="登录密码"
            placeholder="请输入登录密码" input-align="right" error-message-align="right"
            :rules="[{ required: true, message: '请输入登录密码' }]">
            <template #right-icon>
              <van-icon v-show="pass1Show" name="eye-o" @click="pass1Show = !pass1Show" />
              <van-icon v-show="!pass1Show" name="closed-eye" @click="pass1Show = !pass1Show" />
            </template>
          </van-field>
          <van-field v-model="submitForm.secondPassword" name="secondPassword" :type="pass2Show ? 'text' : 'password'"
            label="确认密码" placeholder="请再次输入密码" input-align="right" error-message-align="right"
            :rules="[{ required: true, message: '请再次输入密码' }]">
            <template #right-icon>
              <van-icon v-show="pass2Show" name="eye-o" @click="pass2Show = !pass2Show" />
              <van-icon v-show="!pass2Show" name="closed-eye" @click="pass2Show = !pass2Show" />
            </template>
          </van-field>
        </van-cell-group>
        <van-cell-group title="其他信息">
          <van-field v-model="submitForm.email" name="email" type="email" label="邮箱" placeholder="请输入邮箱" input-align="right" />
        </van-cell-group>
        <div class="form-btns">
          <van-button round block type="primary" color="#265EFE" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { showToast } from "vant"
import { onMounted, reactive, ref } from "vue"
import { useRouter } from "vue-router"
import { useStore } from "vuex"
import api from './api'
import hexMD5 from '@/utils/md5.min.js'

const store = useStore()
const router = useRouter()
const isApp = store.state.isApp

const submitForm = ref({})
const pass1Show = ref(false)
const pass2Show = ref(false)

onMounted(() => {
  store.commit("setNavBar", { show: false })
})

const pageBack = () => {
  router.go(-1)
}

const onSubmit = () => {
  const { firstPassword, secondPassword } = submitForm.value
  const obj = {
    ...submitForm.value,
    firstPassword: hexMD5(firstPassword),
    secondPassword: hexMD5(secondPassword),
  }
  api.shopDaizhuce(obj).then(res => {
    showToast(res.msg)
    if (res.code == '200') {
      setTimeout(() => {
        pageBack()
      }, 500);
    }
  }).catch(err => {
    console.log(err)
  })
}
</script>

<style lang="scss" scoped>
.daizhuc-box {
  height: 100%;
  padding-top: 0 !important;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  .daizhuc-form {
    flex-grow: 1;
    overflow: hidden;
    overflow-y: auto;
    .form-btns {
      margin-top: 20px;
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
</style>